<template>
	<view class="main">
		<view class="search-item">
			<input v-model="searchVal" placeholder="请输入查询内容或学生姓名" :disabled="showPanel"/>
			<button type="primary" :style="{backgroundColor: theme.primary}" @tap="search">查询</button>
		</view>
		<view class="order-bar" :orderCurrentIndex = "orderCurrentIndex">
			<view class="bar-item" :class="{'isActive':orderCurrentIndex == 1}" @click="selectOrder(1)">默认</view>
			<view class="bar-item" :class="{'isActive':orderCurrentIndex == 2}" @click="selectOrder(2)">最新</view>
		</view>
		<j-tabs v-if="mainId" :tabs="tabs" @change="tabsChange" :controlIndex="currentIndex" class="tabs-area"></j-tabs>
		<view class="card-area">
			<view v-for="(item, index) in list" :key="index" class="card" @tap="goItem(item)" @longtap="changePanel(item)">
				<view class="info">
					<view class="title">{{item.title}}</view>
					<view class="subTitle">{{item.subTitle}}</view>
				</view>
				<view 
					v-if="item.isCorrect != null"
					class="correct-tag" 
					:class="{'is-correct':item.isCorrect, 'no-correct':!item.isCorrect}"
					:style="{
						color: `${!item.isCorrect?theme.warning:theme.info}`,
						borderColor: `${!item.isCorrect?theme.warning:theme.info}`}">
					<span>{{item.isCorrectStr}}</span>
				</view>
				<view class="tag">
					<view class="type" :style="{backgroundColor: theme.warning}">{{item.essayTypeStr}}</view>
					<view 
						:class="{
							'default':item.essayStatus == 1, 
							'status':item.essayStatus == 2
						}"
						:style="{
							backgroundColor: getStatus(item.essayStatus)
						}">
						{{item.essayStatusStr}}
					</view>
				</view>
				<view class="card-bottom">
					<view class="title-dtl">
						<span class="author">{{item.authorName}}</span>
						<span class="star" :style="{color: theme.success}">{{item.starCount}}点赞</span>
						<span class="comment" :style="{color: theme.warning}">{{item.commentCount}}评论</span>
					</view>
					<span>提交于 {{item.creationTimeStr}}</span>
				</view>
			</view>
		</view>
		
		<!-- 操作面板 -->
		<view v-if="showPanel" class="option-cover" @tap="hidePanel"></view>
		<view v-if="showPanel" class="option-delete" :style="{backgroundColor: theme.danger}" @tap="deleteItem">删除</view>
		<view v-if="showPanel" class="option-edit" :style="{backgroundColor: theme.primary}" @tap="editorItem">编辑</view>
		<!-- 默认提示 -->
		<view v-if="showBottom" class="none-info">
			--再找也没有了~~--
		</view>
	</view>
</template>

<script>
	import jTabs from '@/components/tui-tabs/j-tabs.vue'
	export default{
		components:{ jTabs },
		data(){
			return{
				theme: this.$theme,
				essayType: '',
				mainId: '',
				//当前用户Id
				hostId: '',
				//列表数据
				list: [],
				//列表默认显示项显示标记
				showBottom: false,
				//搜索栏绑定数据
				searchVal: '',
				//允许上划加载标记，查询后不再允许上划分页加载，下拉刷新后允许重新分页加载数据
				allowAppendData: true,
				//操作面板弹出标记
				showPanel: false,
				//卡片tap事件执行锁
				lock: false,
				//面板数据及长按行数据
				rowData: {},
				//排序tabs项目号
				orderCurrentIndex: 1,
				//tabs栏配置项目
				tabs:{
					defaultIndex: 0,
					width: '100vw',
					height: '6vh',
					list:[
						{selectedIndex: 0, text: '已批改'},
						{selectedIndex: 1, text: '未批改'},
						{selectedIndex: 2, text: '课上讲评'}
					]
				},
				currentIndex: 0,
				//已批改、未批改
				isCorrect: true,
				//课上讲评
				isForComment: false
			}
		},
		computed:{
			getStatus:function(){
				return function(type){
					switch(type){
						case 1:
							return this.theme.info
						case 2:
							return this.theme.success
					}
				}
			}
		},
		watch:{
			list:{
				deep:true,
				handler(e){
					if(e.length == 0){
						this.showBottom = true
					}else{
						this.showBottom = false
					}
				}
			},
			currentIndex(e){
				switch(e){
					//已批改
					case 0:
						this.isCorrect = true
						this.isForComment = null
						break
					//未批改
					case 1:
						this.isCorrect = false
						this.isForComment = null
						break
					//课上讲评
					case 2:
						this.isForComment = true
						this.isCorrect = null
						break
				}
				this.getList(0, 20).then(resp=>{
					this.list = resp.result
				})
			},
			orderCurrentIndex(e){
				switch(e){
					//默认
					case 1:
						this.getList(0, 20).then(resp=>{
							this.list = resp.result
						})
						break
					//最新
					case 2:
						this.getList(0, 20).then(resp=>{
							this.list = resp.result
						})
						break
				}
			}
		},
		onLoad(e) {
			if(e.mainId){
				this.mainId = e.mainId
			}
			if(e.hostId){
				this.hostId = e.hostId
			}
			this.essayType = e.essayType
			this.getList(0, 20).then(resp=>{
				this.list = [...this.list, ...resp.result]
			})
		},
		//下拉刷新
		onPullDownRefresh(){
			this.allowAppendData = true
			this.searchVal = ""
			this.list = []
			setTimeout(()=>{
				this.getList(this.list.length, 20).then(resp=>{
					this.list = [...this.list, ...resp.result]
					uni.stopPullDownRefresh()
				})
			},500)
		},
		//上划加载
		onReachBottom(){
			if(!this.allowAppendData)return
			this.getList(this.list.length, 20).then(resp=>{
				this.list = [...this.list, ...resp.result]
			})
		},
		methods:{
			//排序项目选择
			selectOrder(e){
				this.orderCurrentIndex = e
				this.searchVal = ''
			},
			//tabs选项变更
			tabsChange(selectedIndex){
				this.currentIndex = selectedIndex
				this.searchVal = ''
			},
			//操作面板弹出
			changePanel(e){
				//存在hostId的,及是从'我的'点击来的允许开启操作面板
				if(this.hostId){
					this.lock = true
					this.rowData = e
					this.showPanel = true
				}
			},
			//删除
			deleteItem(){
				//教师布置的作业
				let url = `api/Essay/DeleteEssay?Id=${this.rowData.id}`
				this.$http.request({
					url: url,
					method: 'DELETE',
					allow: true,
					showLoading: true
				}).then(resp=>{
					//视图级别删除
					let currentIndex = this.list.indexOf(this.rowData)
					this.list.splice(currentIndex, 1)
					this.hidePanel()
				})
			},
			//编辑
			editorItem(){
				let item = this.rowData
				uni.navigateTo({
					url: `../meipian/meipian?&isEditor=true&essayType=${item.essayType}&id=${item.id}&isSingleAudio=${item.isSingleAudio}&title=修改作业`
				})
				this.hidePanel()
			},
			//操作面板隐藏
			hidePanel(){
				this.rowData = {}
				this.showPanel = false
			},
			//查询
			search(){
				if(this.searchVal){
					this.allowAppendData = false
				}else{
					this.allowAppendData = true
				}
				this.getList(0, 30).then(resp=>{
					this.list = resp.result
				})
			},
			//页面跳转
			goItem(item){
				//事件执行锁
				if(this.lock){
					this.lock = false
					return
				}
				uni.navigateTo({
					url: `../viewMeiPian/viewMeiPian?essayId=${item.id}&essayType=${this.essayType}&hostId=${this.hostId}&isCorrect=${item.isCorrect}&Id=${item.mainId}&isForComment=${item.isForComment}`
				})
			},
			//列表数据获取,作业获取
			getList(skipCount, maxResultCount){
				let result = {}
				if(this.hostId){
					result = {
						SkipCount: skipCount,
						MaxResultCount: maxResultCount,
						HostId: this.hostId,
						SortType: this.orderCurrentIndex || 1,
						Filter: this.searchVal || ''
					}
				}else{
					result = {
						SkipCount: skipCount,
						MaxResultCount: maxResultCount,
						MainId: this.mainId,
						EssayType: 3, //3： 学生作业
						SortType: this.orderCurrentIndex || 1,
						Filter: this.searchVal || ''
					}
				}
				if(this.mainId){
					if(this.isCorrect == true || this.isCorrect == false){
						result = { ...result, IsCorrect: this.isCorrect }
					}
					if(this.isForComment){
						result = { ...result, IsForComment: this.isForComment }
					}
				}
				return this.$http.request({
					url: 'api/Essay/GetAllEssay',
					method: 'GET',
					allow: true,
					showLoading: false,
					data: result
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes show{
		from{opacity: 0;}
		to{opacity: 1;}
	}
	.card:active{
		background-color: #e2e2e2;
	}
	.main{
		width: 100vw;
		min-height: 100vh;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		animation: 0.5s show;
		background-color: #f1f1f1;
		.search-item{
			width: 100vw;
			height: 100rpx;
			background-color: #f3f3f3;
			border-bottom: 1rpx solid #e2e2e2;
			display: flex;
			justify-content: space-around;
			align-items: center;
			input{
				width: 70vw;
				height: 50rpx;
				padding: 10rpx;
				border-radius: 4rpx;
				border: 1rpx solid #e2e2e2;
				background-color: #fff;
			}
			button{
				width: 15vw;
				height: 60rpx;
				font-size: 25rpx;
				margin: 0;
				display: flex;
				justify-content: center;
				align-content: center;
			}
		}
		.order-bar{
			width: 100%;
			padding: 1vw;
			background-color: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1rpx solid #e2e2e2;
			.bar-item{
				padding: 2vw 1vw 1vw 2vw;
				font-size: 30rpx;
				color: #636363;
			}
			.isActive{
				color: #181818;
				font-weight: bold;
			}
		}
		.tabs-area{
			margin: 10rpx 0;
		}
		.card-area{
			width: 100%;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			.card{
				width: 95%;
				min-height: 15vh;
				height: auto;
				position: relative;
				transition: 0.3s;
				margin: 20rpx 0;
				background-color: #fff;
				border-radius: 4px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				padding: 20rpx;
				overflow: hidden;
				.correct-tag{
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					border-radius: 50%;
					width: 120rpx;
					height: 120rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					white-space: nowrap;
					transform: rotate(30deg);
				}
				.is-correct{
					border: .5px solid #cacaca;
					color: #9f9f9f;
				}
				.is-correct::after{
					content: "";
					width: 110%;
					height: 110%;
					border-radius: 50%;
					border: .5px solid #cacaca;
					position: absolute;
					left: -6%;
					top: -6%;
				}
				.no-correct{
					border: .5px solid #ebae33;
					color: #ebae33;
				}
				.no-correct::after{
					content: "";
					width: 110%;
					height: 110%;
					border-radius: 50%;
					border: .5px solid #ebae33;
					position: absolute;
					left: -6%;
					top: -6%;
				}
				.info{
					width: 95%;
					min-height: 150rpx;
					.title{
						font-size: 35rpx;
						font-weight: 600;
						color: #464646;
						word-break:break-all;
					}
					.subTitle{
						padding: 10rpx 0;
						font-size: 28rpx;
						color: #484848;
					}
								
				}
				.tag{
					padding: 10rpx;
					font-size: 25rpx;
					color: #fff;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.type, .status, .teacher, .default{
						border-radius: 8rpx;
						margin-left: 10rpx;
						padding: 13rpx;
					}
					.type{
						background-color: #ebae33;
					}
					.status{
						background-color: #67C23A;
					}
					.teacher{
						background-color: #1296db;
					}
					.default{
						background-color: #acacac;
					}
				}
				.card-bottom{
					width: 100%;
					font-size: 22rpx;
					color: #747474;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title-dtl{
						display: flex;
						position: relative;
						left: 20rpx;
						.author, .star, .comment{
							font-size: 28rpx;
							color: #484848;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		.option-cover{
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background-color: #1f1f1f;
			opacity: 0.5;
		}
		.option-delete, .option-edit{
			position: fixed;
			top: 43%;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			color: #fff;
			font-size: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.option-delete{
			left: 30%;
		}
		.option-edit{
			left: 60%;
		}
		.none-info{
			width: 100vw;
			height: 10vh;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: inset 0 5rpx 10rpx #f0f0f0;
			color: #747474;
			font-size: 28rpx;
		}
	}
	
</style>
